<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="en" class="ie6">    <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7">    <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8">    <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9">    <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Vmenu | Portfolio</title>
        
        <!-- Google font -->
        <link href='http://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="fonts/Lato-Medium.css">
        <link rel="stylesheet" href="fonts/Lato-MediumItalic.css">
        <link rel="stylesheet" href="fonts/Lato-Semibold.css">

        <!-- Bootstrap css -->
        <link rel="stylesheet" href="css/bootstrap.min.css">

        <!-- Slicknav css -->
        <link rel="stylesheet" href="css/slicknav.min.css">

        <!-- Font awesome css -->
        <link rel="stylesheet" href="css/font-awesome.min.css">

        <!-- Stroke Font Icon css -->
        <link rel="stylesheet" href="css/pe-icon-7-stroke.css">

        <!-- Animate css -->
        <link rel="stylesheet" href="css/animate.css">

        <!-- VenoBox css -->
        <link rel="stylesheet" href="css/venobox.css">

        <!-- Owl carousel 2 css -->
        <link rel="stylesheet" href="css/owl.carousel.css">

        <!-- Custom css -->
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="css/responsive.css">

        <!-- Favicons -->
        <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png">
        <link rel="shortcut icon" type="image/png" href="img/favicon.png"/>  

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!-- Linkon Miyan from rexord.com -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.min.js"></script>
          <script src="js/respond.min.js"></script>
        <![endif]-->
    </head>
    
    <body>
        <!--====| Preloader Area Start |====-->
        <div id="preloader">
            <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
        </div>
        <!--====| Preloader Area End |====-->


        <!--====| Header Area Start |====-->
        <header class="header_area">
           
            <!--====| Header Top Start |====-->
            <div class="header_top">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="header_top_social_logo">
                                <ul>
                                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                </ul>
                            </div>
                            <div class="header_top_phone_no">
                                <a href="tel:(02)-123-456-7890">(02) 123-456-7890</a>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="header_top_search">
                                <form action="#">
                                    <input type="text" placeholder="Search ...">
                                    <input type="submit" value="">
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--====| Header Top End |====-->
            
            <!--====| Main Header Start |====-->
            <div class="main_header">
                <div class="site_logo">
                    <a href="index.html">
                        <img src="img/logo.png" alt="Site Logo">
                        <span class="logo_txt"><span>v</span>menu</span>
                    </a>
                </div>
                <div class="main_menu_area">
                    <nav class="main_menu">
                        <ul>
                            <li>
                                <a href="index.html"><i class="pe-7s-home"></i><span>Home</span></a>
                            </li>
                            <li>
                                <a href="about.html"><i class="pe-7s-light"></i><span>about us</span></a>
                            </li>
                            <li>
                                <a href="services.html"><i class="pe-7s-config"></i><span>services</span></a>
                            </li>
                            <li class="active">
                                <a href="portfolio.html"><i class="pe-7s-portfolio"></i><span>portfolio</span></a>
                            </li>
                            <li>
                                <a href="blog.html"><i class="pe-7s-notebook"></i><span>Blog</span></a>
                            </li>
                            <li>
                                <a href="contact.html"><i class="pe-7s-call"></i><span>contact us</span></a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <!--====| Main Header End |====-->
            
        </header>
        <!--====| Header Area End |====-->


        <!--====| Banner Area Start |====-->
        <section class="banner_area">
            <div class="container">
                <div class="row">
					<div class="contact_banner">
						<h2>portfolio</h2>
						<h4>our latest works</h4>
					</div>
                </div>
            </div>
        </section>
        <!--====| Banner Area End |====-->
		
		
		<!--====| Portfolio area start |====-->
		<section class="portfolio_area">
			<div class="container">
				<div class="row ctcontent">
				<div class="col-md-12">
					<div class="all_portfolio">
						<ul class="porfolio_filter">
							<li class="filter" data-filter="all">All</li>
							<li class="filter" data-filter=".branding">branding</li>
							<li class="filter" data-filter=".motions">motions</li>
							<li class="filter" data-filter=".webdesign">web design</li>
						</ul>
						
						<div id="portfolio">
							<div class="mix branding" data-myorder="1">
								<div class="ports">
									<div class="featured_photo">
                                        <img src="img/portfolio1.jpg" alt="">
                                        <div class="portfolio_caption">
                                            <div class="buttons">  
                                                <a class="lightbox" href="img/portfolio1.jpg"><i class="fa fa-search"></i></a>
                                                <a href="project-details.html"><i class="fa fa-file-o"></i></a>
                                            </div>
                                        </div>
                                    </div>
									<h3>brand of the juju</h3>
									<h4>Branding / Logos</h4>
								</div>
							</div>
							<div class="mix motions" data-myorder="1">
								<div class="ports">
									<div class="featured_photo">
                                        <img src="img/portfolio2.jpg" alt="">
                                        <div class="portfolio_caption">
                                            <div class="buttons">  
                                                <a class="lightbox" href="img/portfolio2.jpg"><i class="fa fa-search"></i></a>
                                                <a href="project-details.html"><i class="fa fa-file-o"></i></a>
                                            </div>
                                        </div>
                                    </div>
									<h3>brand of the juju</h3>
									<h4>Branding / Logos</h4>
								</div>
							</div>
							<div class="mix webdesign" data-myorder="1">
								<div class="ports">
									<div class="featured_photo">
                                        <img src="img/portfolio3.jpg" alt="">
                                        <div class="portfolio_caption">
                                            <div class="buttons">  
                                                <a class="lightbox" href="img/portfolio3.jpg"><i class="fa fa-search"></i></a>
                                                <a href="project-details.html"><i class="fa fa-file-o"></i></a>
                                            </div>
                                        </div>
                                    </div>
									<h3>brand of the juju</h3>
									<h4>Branding / Logos</h4>
								</div>
							</div>
							<div class="mix branding" data-myorder="1">
								<div class="ports">
									<div class="featured_photo">
                                        <img src="img/portfolio4.jpg" alt="">
                                        <div class="portfolio_caption">
                                            <div class="buttons">  
                                                <a class="lightbox" href="img/portfolio4.jpg"><i class="fa fa-search"></i></a>
                                                <a href="project-details.html"><i class="fa fa-file-o"></i></a>
                                            </div>
                                        </div>
                                    </div>
									<h3>brand of the juju</h3>
									<h4>Branding / Logos</h4>
								</div>
							</div>
							<div class="mix motions" data-myorder="1">
								<div class="ports">
									<div class="featured_photo">
                                        <img src="img/portfolio5.jpg" alt="">
                                        <div class="portfolio_caption">
                                            <div class="buttons">  
                                                <a class="lightbox" href="img/portfolio5.jpg"><i class="fa fa-search"></i></a>
                                                <a href="project-details.html"><i class="fa fa-file-o"></i></a>
                                            </div>
                                        </div>
                                    </div>
									<h3>brand of the juju</h3>
									<h4>Branding / Logos</h4>
								</div>
							</div>
							<div class="mix webdesign" data-myorder="1">
								<div class="ports">
									<div class="featured_photo">
                                        <img src="img/portfolio6.jpg" alt="">
                                        <div class="portfolio_caption">
                                            <div class="buttons">  
                                                <a class="lightbox" href="img/portfolio6.jpg"><i class="fa fa-search"></i></a>
                                                <a href="project-details.html"><i class="fa fa-file-o"></i></a>
                                            </div>
                                        </div>
                                    </div>
									<h3>brand of the juju</h3>
									<h4>Branding / Logos</h4>
								</div>
							</div>
							<div class="mix branding" data-myorder="1">
								<div class="ports">
									<div class="featured_photo">
                                        <img src="img/portfolio7.jpg" alt="">
                                        <div class="portfolio_caption">
                                            <div class="buttons">  
                                                <a class="lightbox" href="img/portfolio7.jpg"><i class="fa fa-search"></i></a>
                                                <a href="project-details.html"><i class="fa fa-file-o"></i></a>
                                            </div>
                                        </div>
                                    </div>
									<h3>brand of the juju</h3>
									<h4>Branding / Logos</h4>
								</div>
							</div>
							<div class="mix motions" data-myorder="1">
								<div class="ports">
									<div class="featured_photo">
                                        <img src="img/portfolio8.jpg" alt="">
                                        <div class="portfolio_caption">
                                            <div class="buttons">  
                                                <a class="lightbox" href="img/portfolio8.jpg"><i class="fa fa-search"></i></a>
                                                <a href="project-details.html"><i class="fa fa-file-o"></i></a>
                                            </div>
                                        </div>
                                    </div>
									<h3>brand of the juju</h3>
									<h4>Branding / Logos</h4>
								</div>
							</div>
							<div class="mix webdesign" data-myorder="1">
								<div class="ports">
									<div class="featured_photo">
                                        <img src="img/portfolio9.jpg" alt="">
                                        <div class="portfolio_caption">
                                            <div class="buttons">  
                                                <a class="lightbox" href="img/portfolio9.jpg"><i class="fa fa-search"></i></a>
                                                <a href="project-details.html"><i class="fa fa-file-o"></i></a>
                                            </div>
                                        </div>
                                    </div>
									<h3>brand of the juju</h3>
									<h4>Branding / Logos</h4>
								</div>
							</div>
						</div>	
					</div>
					<div class="pagination">
						<ul>
							<li><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">Next <i class="fa fa-angle-double-right"></i>
							</a></li>
						</ul>
					</div>
				</div>
				</div>
			</div>
		</section>
		<!--====| Portfolio area End |====-->
		
        
        <!--====| Footer Area Start |====-->
        <footer class="footer_area">
            <div class="container footer_top section-padding">
                <div class="row">
                    <div class="col-md-3 col-sm-4">
                        <div class="single_footer_widget">
                            <div class="footer_widget_title">
                                <a href="index.html"><img src="img/footer_logo.png" alt=""></a>
                            </div>
                            <div class="footer_widget_content">
                                <div class="first_wid">
                                    <p>Just two good ol' boys Never meanin' no harm. Beats all you've ever saw been in trouble </p>
                                    <p>Donec volutpat, mi vel egestas eleiend, dolor arcu iaculis nunc. Fusce gravida tortor felis, ac dictum risus sagittis id. </p>
                                    <a href="#">LEAR MORE</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-4">
                        <div class="single_footer_widget">
                            <div class="footer_widget_title">
                                <h2>Recent Post</h2>
                            </div>
                            <div class="footer_widget_content">
                                <div class="footer_recent_post">
                                    <ul>
                                        <li>
                                            <div class="recent_post_photo">
                                                <img src="img/footer_recent_post_photo_1.jpg" alt="">
                                                <div class="caption">
                                                    <a href="#">+</a>
                                                </div>
                                            </div>
                                            <div class="recent_post_content">
                                                <h3><a href="#">Fusce gravida tortor felis, ac dictum risus sagittis</a></h3>
                                                <p>June 15, 2015</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="recent_post_photo">
                                                <img src="img/footer_recent_post_photo_2.jpg" alt="">
                                                <div class="caption">
                                                    <a href="#">+</a>
                                                </div>
                                            </div>
                                            <div class="recent_post_content">
                                                <h3><a href="#">Fusce gravida tortor felis, ac dictum risus sagittis</a></h3>
                                                <p>June 15, 2015</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="recent_post_photo">
                                                <img src="img/footer_recent_post_photo_3.jpg" alt="">
                                                <div class="caption">
                                                    <a href="#">+</a>
                                                </div>
                                            </div>
                                            <div class="recent_post_content">
                                                <h3><a href="#">Fusce gravida tortor felis, ac dictum risus sagittis</a></h3>
                                                <p>June 15, 2015</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-4">
                        <div class="single_footer_widget">
                            <div class="footer_widget_title">
                                <h2>Tags</h2>
                            </div>
                            <div class="footer_widget_content">
                                <div class="tag_wid">
                                    <ul>
                                        <li><a href="#">Awesome</a></li>
                                        <li><a href="#">Photography</a></li>
                                        <li><a href="#">Web Design</a></li>
                                        <li><a href="#">Infographic</a></li>
                                        <li><a href="#">Guitar</a></li>
                                        <li><a href="#">Theme</a></li>
                                        <li><a href="#">Website</a></li>
                                        <li><a href="#">Artist Design</a></li>
                                        <li><a href="#">Themeforest</a></li>
                                        <li><a href="#">Music</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12">
                        <div class="single_footer_widget">
                            <div class="footer_widget_title">
                                <h2>Flickr Widget</h2>
                            </div>
                            <div class="footer_widget_content">
                                <div class="flickr_wid">
                                    <ul>
                                        <li><a href="#"><img src="img/flickr_photo_1.jpg" alt=""></a></li>
                                        <li><a href="#"><img src="img/flickr_photo_2.jpg" alt=""></a></li>
                                        <li><a href="#"><img src="img/flickr_photo_3.jpg" alt=""></a></li>
                                        <li><a href="#"><img src="img/flickr_photo_4.jpg" alt=""></a></li>
                                        <li><a href="#"><img src="img/flickr_photo_5.jpg" alt=""></a></li>
                                        <li><a href="#"><img src="img/flickr_photo_6.jpg" alt=""></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container footer_bottom">
                <div class="row">
                    <div class="col-md-5">
                        <div class="copyright_txt">
                            <p>Copyright © 2015 - All Rights Reserved</p>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div class="footer_menu">
                            <nav>
                                <ul>
                                    <li><a href="index.html">Home</a></li>
                                    <li><a href="">Pages</a></li>
                                    <li><a href="portfolio.html">Portfolio</a></li>
                                    <li><a href="">Shop</a></li>
                                    <li><a href="blog.html">Blog</a></li>
                                    <li><a href="">Shortcodes</a></li>
                                    <li><a href="">Features</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!--====| Footer Area End |====-->
       
        <!-- jQuery Latest version -->
        <script src="js/vendor/jquery.1.11.1.js"></script>

        <!-- Google Maps API -->
        <script src="https://maps.googleapis.com/maps/api/js"></script>

        <!-- Bootstrap JS -->
        <script src="js/bootstrap.min.js"></script>

        <!-- Slicknav JS -->
        <script src="js/jquery.slicknav.min.js"></script>

        <!-- jQuery knob and appear -->
        <script src="js/jquery.appear.js"></script>
        <script src="js/jquery.knob.min.js"></script>

        <!-- jQuery easing -->
        <script src="js/jquery.easing.1.3.min.js"></script>

        <!-- jQuery owl carousel -->
        <script src="js/owl.carousel.min.js"></script>
		
        <!-- Mixitup -->
        <script src="js/jquery.mixitup.js"></script>

        <!-- jQuery VenoBox -->
        <script src="js/venobox.min.js"></script>

        <!-- WOW Animation -->
        <script src="js/wow.min.js"></script>
           
        <!--Activating WOW Animation only for modern browser-->
        <!--[if !IE]><!-->
            <script type="text/javascript">new WOW().init();</script>
        <!--<![endif]-->		

        <!--Oh Yes, IE 9+ Supports animation, lets activate for IE 9+-->
        <!--[if gte IE 9]>
            <script type="text/javascript">new WOW().init();</script>
        <![endif]-->		 

        <!--Opacity & Other IE fix for older browser-->
        <!--[if lte IE 8]>
            <script type="text/javascript" src="js/ie-opacity-polyfill.js"></script>
        <![endif]-->	    

        <!-- jQuery main script -->
        <script src="js/main.js"></script>
    </body>
</html>